<template>
  <div class="assessment-edit-plan-container">
    <div class="my-form-container">
      <el-row
        class="my-form-item"
        v-for="(assessment, index) in assessments"
        :key="index"
      >
        <el-col :span="12" v-for="(item, index1) in assessment" :key="index1">
          <div class="my-form-item-label">{{ item.label }}</div>
          <div class="my-form-item-value" v-show="item.type === 'input'">
            <el-input placeholder="请输入百分数" v-model="item.value" clearable>
            </el-input>
          </div>
          <div class="my-form-item-value" v-show="item.type === 'span'">
            <span>{{ item.value }}</span>
          </div>
          <div class="my-form-item-value" v-show="item.type === 'select'">
            <el-select
              v-model="item.value"
              placeholder="请选择"
              size="small"
              style="width: 187px"
            >
              <el-option
                v-for="option in item.valueLiist"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              >
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row class="my-form-item" style="height: 278px; border: none">
        <el-col :span="24">
          <div class="my-form-item-label">考核设计</div>
          <div class="my-form-item-value assessment-design">
            <el-input
              v-model="design"
              type="textarea"
              :rows="9"
              style="width: 969px"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="button-group">
      <el-button
        class="btn"
        type="text"
        @click="open('此操作将保存该文件, 是否继续?')"
      >保存
      </el-button
      >
      <el-button
        class="btn"
        type="text"
        @click="open('此操作将保存并提交该文件, 是否继续?')"
      >保存并提交
      </el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      assessments: [
        [
          {
            label: "课程名称",
            value: "英语",
            type: 'span'
          },
          {
            label: "课程编号",
            value: "365423",
            type: 'span'
          },
        ],
        [
          {
            label: "课程类型",
            value: "英语培训课1",
            type: 'span'
          },
          {
            label: "学      时",
            value: "20",
            type: 'span'
          },
        ],
        [
          {
            label: "学      分",
            value: "95",
            type: 'span'
          },
          {
            label: "培养层次",
            value: "大专",
            type: 'span'
          },
        ],
        [
          {
            label: "分      制",
            value: "",
            type: 'input'
          },
          {
            label: "课程考核一票否决",
            value: "是",
            type: 'span'
          },
        ],
        [
          {
            label: "授课对象",
            value: "李某某",
            type: 'span'
          },
          {
            label: "人      数",
            value: "62人",
            type: 'span'
          },
        ],
        [
          {
            label: "开课教研室",
            value: "教研室1",
            type: 'span'
          },
          {
            label: "教学班数",
            value: "教研室1",
            type: 'span'
          },
        ],
        [
          {
            label: "课程负责人",
            value: "李某某",
            type: 'span'
          },
          {
            label: "授课教员",
            value: "李某某",
            type: 'span'
          },
        ],
        [
          {
            label: "课下作业成绩所占比例",
            value: "",
            type: 'input'
          },
          {
            label: "课堂测试成绩所占比例",
            value: "",
            type: 'input'
          },
        ],
        [
          {
            label: "期中考试成绩所占比例",
            value: "",
            type: 'input'
          },
          {
            label: "期末考受成绩所占比例",
            value: "",
            type: 'input',

          },
        ],
        [
          {
            label: "期末考试方式",
            value: "笔试考试",
            type: 'select',
            valueLiist: [
              {label: "笔试考试", value: "笔试考试"},
            ],

          },
          {
            label: "场地需求",
            value: "教室一",

            type: 'select',
            valueLiist: [
              {label: "教室一", value: "教室一"},
              {label: "教室二", value: "教室二"},
              {label: "教室三", value: "教室三"},
            ],
          },
        ],
      ],
      design: "",
    };
  },
  mounted() {
  },

  methods: {
    open(str) {
      this.$confirm(str, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "保存成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消保存",
          });
        });
    },
  },
};
</script>
<style lang="less" scoped>
.assessment-edit-plan-container {
  .assessment-design {
    .el-textarea__inner {
      resize: none;
      font-size: 16px;
      color: rgba(0, 76, 167, 1);
    }
  }
}
</style>
<style scoped lang="less">
.assessment-edit-plan-container {
  .assessment-design {
    padding: 25px 38px !important;

    .el-textarea__inner {
      resize: none;
    }

    .red-tip {
      margin: 0 7px;
      display: inline-block;
      vertical-align: 105px;
    }
  }

  .button-group {
    text-align: center;

    .btn {
      display: inline-block;
      font-size: 18px;
      padding: 6px 22px;
      border-radius: 6px;

      &:nth-child(1) {
        color: #f3b815;
        border: 1px solid #f3b815;
        background: #fff6ef;
        margin-right: 139px;
      }

      &:nth-child(2) {
        color: #02c86c;
        border: 1px solid #02c86c;
        background: #f1fff8;
      }
    }
  }
}

/deep/ .el-input--medium .el-input__inner {
  border: 1px solid #f9f9f9;
  background-color: #f9f9f9;
  width: 30%;
  margin-left: -12px !important;
}

</style>
